.demo-tabs {
  .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}

//enter-active (进入) 和 leave-active(离开) 是配套使用的，用来定义进入和离开动画的生效状态（过渡样式）。
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

//搭配使用 v-enter-from 和 v-leave-to 来定义进入和离开的初始状态（过渡的形式，透明，折叠等）。 （如果是(透明的opacity)--(transform: translateX(0);)这种 只需要写enter-from - leave-to就行）
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

//搭配使用 v-enter-to 和 v-leave-from 来定义进入和离开的目标状态。
.v-enter-to,
.v-leave-from {
  opacity: 1;
}

//过渡2样式
.collapse-enter-active,
.collapse-leave-active {
  transition: max-height 0.5s ease;
  overflow: hidden; /* 防止内容溢出 */
}

.collapse-enter-from,
.collapse-leave-to {
  max-height: 0; /* 折叠状态 */
}

.collapse-enter-to,
.collapse-leave-from {
  max-height: 500px; /* 展开状态下的最大高度，可以根据实际内容调整 */
}

//过渡3样式
/*
    进入和离开动画可以使用不同
    持续时间和速度曲线。
  */
//进入
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

//离开
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

//通过scale属性来控制元素的缩放效果
.scale-enter-active,
.scale-leave-active {
  transition: all 0.2s ease-out;
  transform-origin: top; /* 缩放起始点在底部 */
}

.scale-enter-from,
.scale-leave-to {
  transform: scaleY(0);
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}